<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title>微信pc端</title>
		<link rel="stylesheet" href="css/amazeui.min.css" />
		<link rel="stylesheet" href="css/main.css" />
	</head>
	<body>
		<div class="box">
			<div class="wechat">
				
				<div class="sidestrip">
					<div class="am-dropdown" data-am-dropdown>
						<!--头像插件-->
						<div class="own_head am-dropdown-toggle"></div>
						<div class="am-dropdown-content">
					    	<div class="own_head_top">
					    		<div class="own_head_top_text">
					    			<p class="own_name" id="own_name">彭于晏丶plus<img src="images/icon/head.png" alt="" /></p>
					    			<p class="own_numb" id="own_numb">微信号：jsk8787682</p>
					    		</div>
					    		<img src="images/own_head.jpg" alt="" />
					    	</div>
					    	<div class="own_head_bottom">
					    		<p><span>地区</span>江西 九江</p>
					    		<div class="own_head_bottom_img">
					    			<a href=""><img src="images/icon/head_1.png"/></a>
					    			<a href=""><img src="images/icon/head_2.png"/></a>
					    		</div>
					    	</div>
					  	</div>
					</div>
					<!--三图标-->
				  	<div class="sidestrip_icon">
				  		<a id="si_1" style="background: url(images/icon/head_2_1.png) no-repeat;"></a>
				  		<a id="si_2"></a>
				  		<a id="si_3"></a>
				  	</div>
				  	
				  	<!--底部扩展键-->
				  	<div id="doc-dropdown-justify-js">
				  		<div class="am-dropdown" id="doc-dropdown-js" style="position: initial;">
					  		<div class="sidestrip_bc am-dropdown-toggle"></div>
					  	    <ul class="am-dropdown-content" style="">
							    <li>
							    	<a href="#" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">意见反馈</a>
							    	<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
									  <div class="am-modal-dialog">
									    <div class="am-modal-hd">Modal 标题
									      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
									    </div>
									    <div class="am-modal-bd">
									      Modal 内容。本 Modal 无法通过遮罩层关闭。
									    </div>
									  </div>
									</div>
							    </li>
							    
							    <li><a href="#">备份与恢复</a></li>
							    <li><a href="#">设置</a></li>
						    </ul>
					    </div>	
					</div>	
				</div>
				
				<!--聊天列表-->
				<div class="middle on">
					<div class="wx_search">
						<input type="text" placeholder="搜索"/>
						<button>+</button>
					</div>
					<div class="office_text">
						<ul class="user_list" id="user_list">
<!--							<li class="user_active">-->
<!--								<div class="user_head"><img src="images/head/15.jpg"/></div>-->
<!--								<div class="user_text">-->
<!--									<p class="user_name">早安无恙</p>-->
<!--									<p class="user_message">我是傻逼！，金少凯牛逼！</p>-->
<!--								</div>-->
<!--								<div class="user_time">下午 2：54</div>-->
<!--							</li>-->
<!--							<li>-->
<!--								<div class="user_head"><img src="images/head/2.jpg"/></div>-->
<!--								<div class="user_text">-->
<!--									<p class="user_name">夏继涛</p>-->
<!--									<p class="user_message">[小程序]</p>-->
<!--								</div>-->
<!--								<div class="user_time">上午 11：03</div>-->
<!--							</li>-->
<!--							<li>-->
<!--								<div class="user_head"><img src="images/head/3.jpg"/></div>-->
<!--								<div class="user_text">-->
<!--									<p class="user_name">十里老街秋名山车神车队</p>-->
<!--									<p class="user_message">乞讨两块交个话费</p>-->
<!--								</div>-->
<!--								<div class="user_time">昨天</div>-->
<!--							</li>-->
						</ul>
					</div>	
				</div>
			    
			    <!--好友列表-->
				<div class="middle">
					<div class="wx_search">
						<input type="text" placeholder="搜索"/>
						<button>+</button>
					</div>
					<div class="office_text">
						<ul class="friends_list">
							<li>
								<p>新的朋友</p>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/1.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">新的朋友</p>
									</div>
								</div>
							</li>
							<li>
								<p>公众号</p>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/2.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">公众号</p>
									</div>
								</div>
							</li>
							<li>
								<p>A</p>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/3.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">彭于晏丶plus</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/4.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">陈依依</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/5.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">毛毛</p>
									</div>
								</div>
							</li>
							<li>
								<p>B</p>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/6.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">苏笑言</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/7.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">往事不再提</p>
									</div>
								</div>
							</li>
							<li>
								<p>C</p>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/8.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">夏继涛</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/9.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">早安无恙</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/10.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">王鹏</p>
									</div>
								</div>
							</li>
							<li>
								<p>D</p>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/11.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">涨了潮了</p>
									</div>
								</div>
								<div class="friends_box">
									<div class="user_head"><img src="images/head/12.jpg"/></div>
									<div class="friends_text">
										<p class="user_name">Ktz丶中融资</p>
									</div>
								</div>
							</li>
						</ul>
					</div>	
				</div>
				
				<!--程序列表-->
				<div class="middle">
					<div class="wx_search">
						<input type="text" placeholder="搜索收藏内容"/>
						<button>+</button>
					</div>
					<div class="office_text">
						<ul class="icon_list">
							<li class="icon_active">
								<div class="icon"><img src="images/icon/icon.png" alt="" /></div>
								<span>全部收藏</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon1.png" alt="" /></div>
								<span>链接</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon2.png" alt="" /></div>
								<span>相册</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon3.png" alt="" /></div>
								<span>笔记</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon4.png" alt="" /></div>
								<span>文件</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon5.png" alt="" /></div>
								<span>音乐</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon6.png" alt="" /></div>
								<span>标签</span>
							</li>
						</ul>
					</div>	
				</div>
			
				<!--聊天窗口-->
				<div class="talk_window">
					<div class="windows_top">
						<div class="windows_top_box">
							<span id="friendName">聊天人名称</span>
							<ul class="window_icon">
								<li><a href=""><img src="images/icon/icon7.png"/></a></li>
								<li><a href=""><img src="images/icon/icon8.png"/></a></li>
								<li><a href=""><img src="images/icon/icon9.png"/></a></li>
								<li><a href=""><img src="images/icon/icon10.png"/></a></li>
							</ul>
							<div class="extend am-btn am-btn-success" data-am-offcanvas="{target: '#doc-oc-demo3'}"></div>
							<!-- 侧边栏内容 -->
							<div id="doc-oc-demo3" class="am-offcanvas">
							    <div class="am-offcanvas-bar am-offcanvas-bar-flip">
								    <div class="am-offcanvas-content">
								    	<p><a href="http://music.163.com/#/song?id=385554" target="_blank">网易音乐</a></p>
								    </div>
							    </div>
							</div>
						</div>
					</div>
					
					<!--聊天内容-->
					<div class="windows_body">
						<!--<div class="office_text" style="height: 100%;display:none;">-->
							<!--<ul class="content" id="chatbox">-->
								<!--<li class="me"><img src="images/own_head.jpg" title="金少凯"><span>疾风知劲草，板荡识诚臣</span></li>-->
								<!--<li class="other"><img src="images/head/15.jpg" title="张文超"><span>勇夫安知义，智者必怀仁</span></li>-->
							<!--</ul>-->
						<!--</div>-->
						<!--<div class="office_text" style="height: 100%;">-->
							<!--<ul class="content" id="chatbox">-->
								<!--<li class="me"><img src="images/own_head.jpg" title="金少凯"><span>今天下雨了</span></li>-->
								<!--<li class="other"><img src="images/head/15.jpg" title="张文超"><span>今天下冰雹了</span></li>-->
							<!--</ul>-->
						<!--</div>-->
					</div>
					
					<div class="windows_input" id="talkbox">
						<div class="input_icon">
							<a href="javascript:;"></a>
							<a href="javascript:;"></a>
							<a href="javascript:;"></a>
							<a href="javascript:;"></a>
							<a href="javascript:;"></a>
							<a href="javascript:;"></a>
						</div>
						<div class="input_box">
							<textarea name="" rows="" cols="" id="input_box"></textarea>
							<button id="send">发送（S）</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/amazeui.min.js"></script>
	<script type="text/javascript" src="js/zUI.js"></script>
	<script type="text/javascript" src="js/wechat.js"></script>
	
	<script type="text/javascript">
		//三图标
		window.onload=function(){
			var urlPrefix = "ws://122.51.49.32:80/chat-room/";
			// var urlPrefix = "ws://localhost:80/chat-room/";
			//判断当前浏览器是否支持WebSocket
			var ws=null;
			if('WebSocket' in window){
				ws = new WebSocket(urlPrefix + localStorage.getItem("userId"));
			}
			else{
				alert('浏览器不支持 websocket')
			}
			ws.onmessage = function (event) {
				//接收服务端返回给前端的消息
				var arr=event.data.split("=")
                console.log(decodeURIComponent(arr[0]))
                console.log(decodeURIComponent(arr[1]))
				$('#chatbox'+decodeURIComponent(arr[1])).append('<li class="other"><img src="'+'images/head/15.jpg'+'"><span>'+decodeURIComponent(arr[0])+'</span></li>');
			};
            // 定义关闭时的回调
            ws.onclose = function(evt) {
                console.log("WebSocketClosed!");
            };

			// 定义错误时的回调
            ws.onerror = function(evt) {
                console.log("WebSocketError!");
            };
			function a(){
				var si1 = document.getElementById('si_1');
				var si2 = document.getElementById('si_2');
				var si3 = document.getElementById('si_3');
				si1.onclick=function(){
					si1.style.background="url(images/icon/head_2_1.png) no-repeat"
					si2.style.background="";
					si3.style.background="";
				};
				si2.onclick=function(){
					si2.style.background="url(images/icon/head_3_1.png) no-repeat"
					si1.style.background="";
					si3.style.background="";
				};
				si3.onclick=function(){
					si3.style.background="url(images/icon/head_4_1.png) no-repeat"
					si1.style.background="";
					si2.style.background="";
				};
			};
            function getFriendList() {
                $.ajax({
                    type: "GET",
                    url: 'friend/getFriendList',
                    headers: {"Authorization":localStorage.getItem("token")},
                    contentType: "application/json; charset=utf-8",//传给服务器的数据格式,默认为application/x-www-form-urlencoded
                    dataType:'json',//期望服务端返回的数据格式
                    cache: false,
                    success: function(data){
                        console.log(data)
                        var list =data.t
                        if (list){
                            var text='';
                            var messageBody=''
                            for (var i=0;i<list.length;i++){
                                if (i==0){
                                    text +=
                                        '<li class="user_active" id="userli'+list[i].friendId+'" onclick="tt(\''+list[i].friendId+'\',\''+list[i].remarks+'\')">\n' +
                                        '\t\t\t\t\t\t\t\t<div class="user_head"><img src="images/head/15.jpg"/></div>\n' +
                                        '\t\t\t\t\t\t\t\t<div class="user_text">\n' +
                                        '\t\t\t\t\t\t\t\t\t<p class="user_name">'+list[i].remarks+'</p>\n' +
                                        '\t\t\t\t\t\t\t\t\t<p class="user_message">hello</p>\n' +
                                        '\t\t\t\t\t\t\t\t</div>\n' +
                                        '\t\t\t\t\t\t\t\t<div class="user_time">下午 2：54</div>\n' +
                                        '\t\t\t\t\t\t\t</li>'
                                    $('#friendName').html(list[0].remarks);
                                    localStorage.setItem("currentFriendId",list[i].friendId);

                                    messageBody += '<div class="office_text" id="div'+list[i].friendId+'" style="height: 100%;">\n' +
                                        '\t\t\t\t\t\t\t<ul class="content" id="chatbox'+list[i].friendId+'">\n' +
                                        '\t\t\t\t\t\t\t</ul>\n' +
                                        '\t\t\t\t\t\t</div>';
                                }else{
                                    text +=
                                        '<li id="userli'+list[i].friendId+'" onclick="tt(\''+list[i].friendId+'\',\''+list[i].remarks+'\')">\n' +
                                        '\t\t\t\t\t\t\t\t<div class="user_head"><img src="images/head/15.jpg"/></div>\n' +
                                        '\t\t\t\t\t\t\t\t<div class="user_text">\n' +
                                        '\t\t\t\t\t\t\t\t\t<p class="user_name">'+list[i].remarks+'</p>\n' +
                                        '\t\t\t\t\t\t\t\t\t<p class="user_message">hello</p>\n' +
                                        '\t\t\t\t\t\t\t\t</div>\n' +
                                        '\t\t\t\t\t\t\t\t<div class="user_time">下午 2：54</div>\n' +
                                        '\t\t\t\t\t\t\t</li>'

                                    messageBody += '<div class="office_text" id="div'+list[i].friendId+'" style="height: 100%;display:none;">\n' +
                                        '\t\t\t\t\t\t\t<ul class="content" id="chatbox'+list[i].friendId+'">\n' +
                                        '\t\t\t\t\t\t\t</ul>\n' +
                                        '\t\t\t\t\t\t</div>'

                                }
                            }
                            $('#user_list').append(text)
                            $('.windows_body').append(messageBody)
                        }
                    }
                });
            }
            getFriendList();
			function sendMessage(){
				var text = document.getElementById('input_box');
				// var chat = document.getElementById('chatbox'+localStorage.getItem("currentFriendId"));

				var btn = document.getElementById('send');
				var talk = document.getElementById('talkbox');
				btn.onclick=function(){
                    var chat = $("#chatbox"+localStorage.getItem("currentFriendId"))
					if(text.value ==''){
			            alert('不能发送空消息');
			        }else{
					    console.log(22222)
					    console.log(chat)
						// chat.innerHTML += '<li class="me"><img src="'+'images/own_head.jpg'+'"><span>'+text.value+'</span></li>';
                        chat.append('<li class="me"><img src="'+'images/own_head.jpg'+'"><span>'+text.value+'</span></li>')
						// chat.scrollTop=chat.scrollHeight;
						// talk.style.background="#fff";
						// text.style.background="#fff";
						if (ws){
						    var msg=JSON.stringify({"to":localStorage.getItem("currentFriendId"),"message":text.value})
							ws.send(msg);
						}
						//输入框置空
						text.value = '';
					};
				};
			};
			a();
			sendMessage();
            $("#own_name").html(localStorage.getItem("name"))
		};
        function tt(friendId,name) {
            localStorage.setItem("currentFriendId",friendId);
            $("#user_list li").removeClass("user_active")
			$("#userli"+friendId).addClass("user_active")
            $("#friendName").html(name);
            $(".windows_body div").hide();
            $("#div"+friendId).show();
        }


	</script>
	</body>
</html>
